<template>
    <el-dropdown
        trigger="click"
        @command="handleSetLanguage"
    >
        <el-tooltip 
            content="切换语言" 
            effect="dark"
        >
            <svg-icon class="icon" icon="language" />
        </el-tooltip>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'

const store = useStore()

const language = computed(() => store.getters.language)

const i18n = useI18n()
const handleSetLanguage = lang => {
    i18n.locale.value = lang
    store.commit('app/setLanguage',lang)
    ElMessage.success('切换成功')
}


</script>

<style lang="scss" scoped>
.icon{
    font-size: 25px;
    cursor: pointer;
}
</style>